<template>
  <el-dialog
  :title="title"
  :visible.sync="dialogVisible"
  width="20%"
  :close-on-click-modal="false"
  :before-close="handleClose">
    <el-form :model="menuForm" ref="menuForm" :rules="rules" label-width="80px">
      <el-form-item label="名称:" prop="menuName">
        <el-input v-model="menuForm.menuName" placeholder="请输入权限名称"></el-input>
      </el-form-item>
      <el-form-item label="类型:">
        <el-radio-group v-model="menuForm.menuType">
          <el-radio v-for="(item, index) in $config.MENU_TYPE" :key="index" :label="Number(index)"> {{ item }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="权限值:" prop="menuValue">
        <el-input v-model="menuForm.menuValue" placeholder="请输入权限值"/>
      </el-form-item>
      <el-form-item label="排序值:">
        <el-input v-model.number="menuForm.menuSort" placeholder="请输入排序值"/>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" :loading="loading" @click="confirm">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { merchantsMenuDetail, merchantsMenuAdd, merchantsMenuEdit } from '@/api/merchants/menu'

export default {
  name: 'MerchantsMenuAdd',
  props: {
    rowId:{
      type: Number,
      default: ()=> null
    },
    title: {
      type: String,
      default: ()=> null
    },
    showDialog: {
      type: Boolean,
      default: ()=> false
    },
    menuParentId: {
      type: Number,
      default: ()=> null
    }
  },
  computed: {
    dialogVisible: {
      get(){
        return this.showDialog
      }
    }
  },
  created(){
    this.menuForm = { ...this.initForm }
  },
  data(){
    return {
      menuForm: null,
      initForm: {
        id: null,
        parentId: 0,
        menuName: '',
        menuType: 1,
        menuValue: '',
        menuSort: 100,
      },
      rules: {
        menuName: [ { required: true, message: '请输入权限名称', trigger: 'blur, change' }],
        menuValue: [ { required: true, message: '请输入权限值', trigger: 'blur, change' }],
      },
      loading: false
    }
  },
  watch: {
    rowId: {
      handler(rowId){
        if(!rowId) return
        console.log("rowId:"+rowId)

        this.loadDetail(rowId)
      }
    }
  },
  methods: {
    // 加载详情
    async loadDetail(rowId) {
      const res = await merchantsMenuDetail(rowId)
      if(!res.data) this.handleClose()
      this.menuForm = res.data
    },

    // 关闭弹窗
    handleClose(){
      this.$emit('update:showDialog', false)
      this.$emit('update:menuParentId', null)
      this.$emit('update:rowId', null)
      this.$emit('update:title', null)
      this.loading = false
      this.menuForm = { ...this.initForm }
      this.$refs.menuForm.resetFields()
    },

    // 提交数据
    confirm(){
      this.$refs.menuForm.validate(async (valid) => {
        if (valid) {
          try{
            this.loading = true
            if(this.menuParentId && this.menuParentId > 0) this.menuForm.parentId = this.menuParentId
            if(!this.rowId){
              await merchantsMenuAdd(this.menuForm)
            this.handleClose()
            }else {
              await merchantsMenuEdit(this.menuForm)
              this.handleClose()
            }
            this.$emit('reloadData')
          }catch(e) {
            this.loading = false
          }
        } else {
          console.log('error submit!!');
          this.loading = false
          return false;
        }
      });
    }
  }
}
</script>
<style lang="scss" scoped>

</style>